import React, { useEffect, useState,useMemo } from 'react'
import request from '../utils/request'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import './index.scss'
function List() {
  const [searchParams]=useSearchParams()
  const navigate=useNavigate()
  const start = searchParams.get('start')
  const end = searchParams.get('end')
  const [fl,setFl] =useState([]) 
  const getList=async()=>{
    const res = await request.get('/trip/airplane',{params:{start,end}})
    console.log(res)
    const {code,data,message}=res.data 
    if(code===200){
        setFl(data.body.fl)
    }else{
      Toast.show(message)
    }
  }
  console.log(fl)
  //useMemo优化
  const reMemo=useMemo(()=>{
    return fl
  },[fl])
  useEffect(()=>{
    getList()
  },[])

  const goDetail=(v)=>{
    navigate('/detail',{state:v})
  }
  return (
    <div>
      {
        reMemo.map((item,index)=>{
          return (
              <div className='list' key={index} onClick={()=>goDetail(item)}>
           <div className='list_header'>
             <div className="left">
                <dl  style={{marginLeft:'20px'}}>
                    <dt>{item.dst}</dt>
                    <dd>{item.dasn}</dd>
                </dl>
                <dl  style={{marginLeft:'20px'}}>
                    <dt>
                      {item.amn}
                       <hr/>
                    </dt>
                    <dd>{item.fn}</dd>
                </dl>
                 <dl  style={{marginLeft:'20px'}}>
                    <dt>
                      {item.ast}
                     
                    </dt>
                    <dd>{item.aasn}</dd>
                </dl>
             </div>
             <div className="right">
                <span>￥{item.atp}</span>
             </div>
         </div>
         <div className="bottom">
           <span  style={{marginLeft:'20px'}}>二等座 有票</span>
            <span  style={{marginLeft:'20px'}}>一等座 有票</span>
             <span  style={{marginLeft:'20px'}}>商务座 有票</span>
         </div>
       </div>
          )
        })
      }
     
    </div>
  )
}

export default List
